<template>
	<div>
		<div class="header">
			<div class="fstart"  @mouseenter="openMenusTow=!openMenusTow" @mouseleave="openMenusTow=!openMenusTow">
				<i class="icon-menu" @click="openconMenu" :style="openMenu?'transform: rotate(180deg);':''">
					<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor" aria-hidden="true"
						focusable="false">
						<use xlink:href="/icons/icon.svg#btn_zcl_arrow--sprite"></use>
					</svg>
				</i>
				<img class="logo" @click="goIndex" :src="config.domain+config.site_logo" alt="">
				<div class="fstart"
					style="padding: 0 8px;margin-left: 8px;padding-right: 80px;cursor: pointer;position: relative;">
					<div class="sagds">
						<div class="titess">
							{{langName}}
						</div>
						<i :style="openMenusTow?'transform: rotate(180deg);':''" class="dropdown-arrow"
							style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 12 7" width="1em" height="1em" fill="currentColor" aria-hidden="true"
								focusable="false" style="color:var(--theme-primary-color);">
								<use xlink:href="/icons/icon.svg#comm_icon_sort--sprite"></use>
							</svg>
						</i>
					</div>
					<div class="downlist" v-if="openMenusTow" style="top: 35px;">
						<div class="dlitem" v-for="(item,index) in langList" @click="switchLang(item.key,item.name)" :key="index">
							<div class="text" :class="{dsf:$i18n.locale==item.key}">{{item.name}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="fend" v-if="!userInfo">
				<div class="btn" @click="openLogin">{{$t('h_pcheader.title1')}}</div>
				<div class="btn1" @click="openReg">{{$t('h_pcheader.title2')}}</div>
			</div>
			<div v-else class="fend">
				<div class="moneyBox">
					<img src="../assets/images/index/bx.jpg" alt="" style="position: relative;width: 0.15rem;height: 0.15rem;border-radius: 50%;">
					<!-- <i aria-hidden="true" focusable="false"
						style="display: inline-block; position: relative; background-image: url(/icons/main.png); background-position:-210px -2129px; background-size: 490px 430px;"></i> -->
					<span @click="$router.push('/mine/walletCenter')">{{ userInfo.money }}</span>
					<i class="icon-reload" @click="reloadUserInfo(true)">
						<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor" aria-hidden="true"
							focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite"></use>
						</svg>
					</i>
				</div>
				<div class="goRecharge" @click="gorecharge">
					{{$t('h_pcheader.title3')}}
				</div>
				<div class="goRecharge1" @click="gosecurity">
					{{$t('h_pcheader.title4')}}
				</div>
				<div class="goRecharge1" @click="goYuebao">
					{{$t('h_pcheader.title5')}}
				</div>
				<div class="fstart"
					style="padding: 0 8px;margin-left: 8px;padding-right: 80px;cursor: pointer;position: relative;"
					@mouseenter="openMenus=!openMenus" @mouseleave="openMenus=!openMenus">
					<div class="avatar">
						<img src="../../src/assets/images/img_txn1.png"
							alt="">
						<div class="abs" @click="govip">
							<img src="../../src/assets/images/yh/vip.png" alt="">
							<span>{{userInfo.vip_id}}</span>
						</div>
					</div>
					<div class="info">
						<div class="fstart">
							<div>{{userInfo.username}}</div>
							<!-- <i style="display: inline-flex; justify-content: center; align-items: center;" @click="copy(userInfo.username)">
								<svg viewBox="0 0 23.001 24.3" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_copy_european--sprite"></use>
								</svg>
							</i> -->
						</div>
						<div class="fstart">
							<div style="color: var(--theme-alt-neutral-2);">ID:{{userInfo.id}}</div>
							<i style="display: inline-flex; justify-content: center; align-items: center;"
								@click="copy(userInfo.id)">
								<svg viewBox="0 0 23.001 24.3" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_copy_european--sprite"></use>
								</svg>
							</i>
						</div>
					</div>
					<i :style="openMenus?'transform: rotate(180deg);':''" class="dropdown-arrow"
						style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 12 7" width="1em" height="1em" fill="currentColor" aria-hidden="true"
							focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_sort--sprite"></use>
						</svg>
					</i>
					<div class="downlist" v-if="openMenus">
						<div class="dlitem" @click="gopromotion">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_tg1--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title6')}}</div>
						</div>
						<div class="dlitem1" @click="goRecord('1')">
							<i class="icons">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_zhmx_cny--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title7')}}</div>
						</div>
						<div class="dlitem1" @click="goRecord('2')">
							<i class="icons" style="color: #04be02;">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_tzjl_cny--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title8')}}</div>
						</div>
						<div class="dlitem" @click="goNotice">
							<i class="icons" style="color: var(--theme-primary-color);">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_xx2--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title9')}}</div>
						</div>
						<div class="dlitem1" @click="gowallet">
							<i class="icons" style="color: var(--theme-primary-color);">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_zxqb1--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title10')}}</div>
						</div>
						<div class="dlitem1" @click="gosecurity">
							<i class="icons" style="color: var(--theme-primary-color);">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_wd_tx_cny--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title11')}}</div>
						</div>
						<div class="dlitem1" @click="goSetting">
							<i class="icons" style="color: #ea4e3d;">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_sz1--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title12')}}</div>
						</div>
						<div class="dlitem" @click="gosecure">
							<i class="icons" style="color: #04be02;">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_aqzx1--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title13')}}</div>
						</div>
						<div class="dlitem1" @click="goAbout">
							<i class="icons" style="color: var(--theme-primary-color);">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_gywm1--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title14')}}</div>
						</div>
						<div class="dlitem1" @click="loginout = true">
							<i class="icons" style="color: #04be02;">
								<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_grzx_tc1--sprite"></use>
								</svg>
							</i>
							<div class="text">{{$t('h_pcheader.title15')}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="zzc" v-show="loginout">
			<div class="zzcbox">
				<div class="zzccon">
					<div>
						<div class="zzctext">{{$t('h_pcheader.title16')}}</div>
						<div class="zzctext1">{{$t('h_pcheader.title17')}}</div>
					</div>
					<div class="zzcbtn">
						<div class="zzcbtn1" @click="logout">{{$t('h_pcheader.title18')}}</div>
						<div class="zzcbtn2" @click="loginout = false">{{$t('h_pcheader.title19')}}</div>
					</div>
				</div>
			</div>
		</div>
		<loginBox ref="loginBox"></loginBox>
		<regBox ref="regBox"></regBox>
		<userMsgBox ref="userMsgBox"></userMsgBox>
		<forgetBox ref="forgetBox"></forgetBox>
		<verifyBox ref="verifyBox"></verifyBox>
		<newmanbox1 ref="newmanb1" :money="recharge_money" :newmanList="newmanList"></newmanbox1>

		<div class="tk" v-show="is_recharge">
		<!-- 充值弹框 -->
		<Recharge @close_tk="close_tk()"></Recharge>
		</div>

	
		<div class="mask" v-show="is_recharge" @click="is_recharge=0"></div>


	</div>
</template>

<script>
	import loginBox from './pclogin.vue'
	import regBox from './pcreg.vue'
	import userMsgBox from './pcusermsg.vue'
	import forgetBox from './pcforgetbox.vue'
	import verifyBox from './pcverifybox.vue'
	import newmanbox1 from './newmanBox1.vue'
	import Recharge from './recharge.vue'
	export default {
		components: {
			loginBox,
			regBox,
			userMsgBox,
			forgetBox,
			verifyBox,
			newmanbox1,
			Recharge
		},
		data() {
			return {
				is_recharge:0,
				openMenu: true,
				userInfo: null,
				loginout: false,
				openMenus: false,
				openMenusTow: false,
				recharge_money: 0,
				newmanList: [],
				langList: [
					// {
					// 	name: '简体中文',
					// 	key: 'cn'
					// },
					{
						name: 'English',
						key: 'en'
					},
					{
						name: 'Português',
						key: 'nl' //葡萄牙语
					},
					// {
					// 	name: 'Việt Nam',
					// 	key: 'vn'  //越南
					// },
					// {
					// 	name: ' عرب . ',
					// 	key: 'al'  //阿拉伯
					// },
					// {
					// 	name: 'भारत',
					// 	key: 'in'  //印度
					// },

				],
				langName:"",
				config:{},
			}
		},
		mounted() {
			if (localStorage.getItem('token')) {
				this.userInfo = localStorage.getItem('userInfo')
				this.reloadUserInfo()
			} else if (localStorage.getItem('login') == 1) {
				//好像进入移动端  这个pc也会触发
				//先关闭了
				console.log('pc先清楚这个缓存，这次弹窗---')
				// localStorage.removeItem('login')
				this.openLogin()
			}
			if(localStorage.getItem("locale")){
				this.langList.forEach((it,index)=>{
					if(it.key==localStorage.getItem("locale")){
						this.langName=it.name;
					}
				})
			}

			const url = window.location.href;
			console.log(url,'地址栏上')
			// 使用正则表达式匹配URL中的invite_code参数值
			const inviteCode = url.match(/[?&]invite_code=([^&]+)/);

			// 如果匹配成功，提取invite_code的值
			if (inviteCode&&!localStorage.getItem('token')) {
				console.log('有邀请码跳转注册页面')
				this.openReg()
			} else {
				console.log('未找到invite_code参数');
			}
			this.initData()
		},
		methods: {
			close_tk(){
					this.is_recharge=0;
			},
			initData(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.config=res.data[1].value;
						console.log(this.config,'config')
						// that.$router.push('../../index/downloadapp?url=' + res.data[0].value)
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			switchLang(l,name) {
			  this.$i18n.locale = l;
			  localStorage.setItem("locale",l)
			  this.langName=name;
			  this.$router.go(0)
			},
			goIndex() {
				this.$router.push('/')
			},
			logout() {
				localStorage.removeItem('token')
				// localStorage.clear()
				if (window.location.href.split('/#')[1] == '/#' || window.location.href.split('/#')[1] == '/') {
					this.$router.replace({
						path: 'index/empty'
					})
				} else {
					window.location.hash = '/#'
				}
			},
			async copy(text) {
				try {
					await navigator.clipboard.writeText(text);
					this.$message.success(this.$t('h_pcheader.title20'))
					/* Resolved - 文本被成功复制到剪贴板 */
				} catch (err) {
					this.$message.success(this.$t('h_pcheader.title21'))
					console.error('Failed to copy: ', err);
					/* Rejected - 文本未被复制到剪贴板 */
				}
			},
			govip() {
				this.$router.push('../../mine/vip')
			},
			gopromotion() {
				this.$router.push('../../mine/promotion')
			},
			goNotice() {
				this.$router.push('../../mine/notice')
			},
			goRecord(index) {
				localStorage.setItem('record_index', index)
				this.$router.push('../../mine/mingxi_record')
			},
			gosecurity() {
				this.$router.push('../../mine/security')
			},
			goYuebao() {
				this.$router.push('../../mine/yuebao')
			},
			gorecharge() {
				// this.$router.push('../../recharge/recharge')
				this.is_recharge=1;
			},
			goSetting() {
				this.$router.push('../../mine/setting')
			},
			goAbout() {
				this.$router.push('../../mine/about')
			},
			gowallet() {
				this.$router.push('/mine/walletCenter')
			},
			gosecure() {
				this.$router.push('/mine/secure')
			},
			openLogin() {
				this.$refs.loginBox.openLogin()
			},
			openReg() {
				this.$refs.regBox.openReg()
			},
			openForget() {
				this.$refs.forgetBox.openForget()
			},
			openForget2() {
				this.$refs.forgetBox.openForget2()
			},
			openUserMsg() {
				this.$refs.userMsgBox.openUserMsg()
			},
			openverifyBox(ret = () => {}) {
				this.$refs.verifyBox.open(ret)
			},
			openconMenu() {
				if (this.openMenu) {
					this.openMenu = !this.openMenu
					this.$parent.$parent.$parent.closeMenus()
				} else {
					this.openMenu = !this.openMenu
					this.$parent.$parent.$parent.openMenus()
				}
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
						if (localStorage.getItem('first') == 1) {
							localStorage.setItem('first', 2)
							this.getNewTask()
						}
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			getNewTask() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.newTask({}, (res) => {
					loading.close();
					if (res.code == 0) {
						this.recharge_money = res.data.allMoney;
						this.newmanList = res.data.list;
						this.$nextTick(() => {
							// this.$refs.newmanb1.openForget()
						})
					} else {
						if (res.code != 201) {
							// this.$message.error(res.msg);
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.sagds {
		padding: 5px 10px;
		min-width: 100px;
		border: 1px solid var(--theme-primary-color);
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--theme-primary-color);
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 400px;
		/* max-width: calc(100vw - 16px); */
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		list-style: none;
	}

	.zzccon {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		position: relative;
		padding: 20px 15px;
	}

	.zzctext {
		font-size: 17px;
		font-weight: 700;
		color: #ffffff;
		text-align: center;
	}

	.zzctext1 {
		color: var(--theme-text-color);
		font-size: 14px;
		margin: 20px 0 50px;
		text-align: center;
	}

	.zzcbtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

	.zzcbtn1 {
		flex: 1;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background-color: transparent;
		border: 1px solid;
		border-color: var(--theme-primary-color);
		color: var(--theme-primary-color);
		border-radius: 5px;
		padding: 0 20px;
		cursor: pointer;
	}

	.zzcbtn2 {
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: #ffffff;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		margin-left: 20px;
		flex: 1;
		border-radius: 5px;
		padding: 0 20px;
		cursor: pointer;
	}

	.header {
		background: var(--theme-main-bg-color);
		align-items: center;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		height: 62px;
		max-width: 100%;
		padding: 0 10px 0 15px;
		position: relative;
		z-index: 997;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.fstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.icon-menu {
		color: var(--theme-primary-color);
		font-size: 20px;
		margin: 0 6px 0 20px;
		transition: all 0.1s;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.logo {
		height: 43px;
		margin-left: 15px;
	}

	.fend {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.btn {
		width: 74px;
		text-align: center;
		background-color: var(--theme-primary-color);
		margin-right: 15px;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		padding: 0 7px;
		border-radius: 5px;
		cursor: pointer;
	}

	.btn1 {
		width: 74px;
		text-align: center;
		margin-right: 15px;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		color: var(--theme-primary-color);
		padding: 0 7px;
		border: 1px solid var(--theme-primary-color);
		border-radius: 5px;
		cursor: pointer;
	}

	.moneyBox {
		margin-right: 10px;
		display: flex;
		align-items: center;
	}

	.moneyBox i:first-child {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: 1px solid var(--theme-secondary-color-finance);
	}

	.moneyBox span {
		color: var(--theme-secondary-color-finance);
		font-size: 15px;
		text-decoration: underline;
		margin: 0 8px;
	}

	.moneyBox .icon-reload {
		color: var(--theme-primary-color);
		font-size: 26px;
		display: flex;
	}

	.goRecharge {
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		margin-left: 5px;
		min-width: 78px;
		padding: 0;
		color: var(--theme-primary-font-color);
		text-shadow: none;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
	}

	.goRecharge1 {
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		margin-left: 5px;
		min-width: 78px;
		padding: 0;
		color: var(--theme-primary-color);
		text-shadow: none;
		font-size: 14px;
		text-align: center;
		border: 1px solid var(--theme-primary-color);
		cursor: pointer;
	}

	.avatar {
		width: 44px;
		height: 44px;
		position: relative;
		margin-right: 8px;
	}

	.avatar img {
		width: 44px;
		height: 44px;
	}

	.avatar .abs {
		height: 14px;
		background: rgb(36, 178, 153);
		align-items: center;
		border-radius: 2px 0 2px 0;
		display: flex;
		justify-content: flex-end;
		bottom: 0;
		position: absolute;
		right: 0;
		padding: 0 4px;
	}

	.avatar .abs img {
		width: 15px;
		height: 10px;
	}

	.avatar .abs span {
		font-size: 12px;
		font-weight: 700;
		color: #e5b952;
		margin-left: 2px;
	}

	.info {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.info div {
		width: 90px;
		height: 25px;
		line-height: 25px;
		text-align: left;
		font-size: 14px;
		color: #fff;
	}

	.info i {
		color: var(--theme-primary-color);
		font-size: 15px;
	}

	.dropdown-arrow {
		color: var(--theme-primary-color);
		font-size: 8px;
		margin-left: 5px;
		transition: all .3s;
	}

	.downlist {
		width: calc(100% - 72px);
		height: auto;
		position: absolute;
		left: 0;
		top: 52px;
		background-color: var(--theme-top-nav-bg);;
		border: thin solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		padding: 0 10px;
		transition: opacity 0.3s ease-in;
	}

	.dlitem {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.dlitem1 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 8px 0;
	}

	.downlist .icons {
		height: 26px;
		width: 26px;
		font-size: 26px;
		color: #ffaa09;
		position: relative;
	}

	.text {
		color: var(--theme-text-color);
		font-size: 12px;
		margin-left: 5px;
	}
	
	.dsf{
		color: #fff;
	}
	.tk{
		position: fixed;
		left: 50%;
		top: 30%;
		transform: translate(-50%,-20%);
		z-index: 1001;
		width: 40vw;
		/* height: 50%; */
		height: 600px !important;
		/* border-top-left-radius: 0.2rem;
		border-top-right-radius: 0.2rem; */
		background-color: var(--theme-top-nav-bg);
	}
	.mask{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 88;
		height: 100%;
		background-color: rgba(0, 0, 0, .45);
	}
</style>